<template>
    <div>
        <ul>
            <li class="li back-fff" v-for="(item,index) in AnswerMessageList" :key="index" @click="questionAnswering(item)">
                <div class="flex">
                    <div class="author">{{item.F_CreateUserName}}</div>
                    <div class="time">{{$ut.dateFormat(item.F_CreateDate)}}</div>
                </div>
                <div class="h4" v-if="item.F_CommentTitle">
                    {{item.F_CommentTitle}}
                </div>
                <p class="p">
                    {{item.F_Comment}}
                </p>
            </li>
        </ul>
        <div class="back-fff reply" v-if="form.F_CommentId">
            <div class="textarea">
                <el-input type="textarea" :rows="6" placeholder="回复留言" v-model="form.F_AnswerContent">
                </el-input>
            </div>
            <div>
                <el-button size="medium" @click="Submit" type="primary">Submit</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { GetAnswerMessageList ,ReplyMessage} from "@/api/user";
export default {
	data() {
		return {
			form: {
				F_UserId:this.$store.state.userId,
				F_Name:this.$store.state.user.F_RealName
			},
			F_CommentId:this.$route.query.F_CommentId,
			AnswerMessageList:[],
		};
	},
	mounted() {
		this.GetAnswerMessageList();
	},
	methods: {
		GetAnswerMessageList() {
			GetAnswerMessageList({
				F_CommentId: this.F_CommentId
			}).then(res => {
				this.AnswerMessageList = res.data.Data;
			})
		},
		Submit(){
			ReplyMessage(this.form).then(() => {
				this.$set(this.form, "F_AnswerContent", "");
				this.$message.success({ message: "创建成功", duration: 1200 });
				this.GetAnswerMessageList();
			})
		},
		questionAnswering(item){
			this.$set(this.form, "F_CommentId", item.F_CommentId);
		}
	}
};
</script>
<style scoped lang="scss">
.li {
    padding: 20px;
    border-bottom: 1px solid #eee;
    .time {
        color: #666666;
        margin-left: 40px;
    }
    .replier {
        margin-left: 5px;
    }
    .h4 {
        font-size: 18px;
        margin-top: 30px;
    }
    .p {
        font-size: 16px;
        color: #666666;
        margin-top: 30px;
    }
}
.author {
    color: #2d9ef3;
}
.reply {
    margin-top: 10px;
    padding: 15px 30px;
}
.textarea {
    margin: 10px 0;
}
</style>